import React, { useCallback, useEffect, useMemo, useState } from 'react';
import './index.less';
import { Button, Card, DatePicker, Input, Space, Table, Form } from 'antd';
import { useAntdTable } from 'ahooks';
import { PaginatedParams } from 'ahooks/lib/useAntdTable';
import useRouter from 'hooks/use-router';
import Sort, { ISelectedSort, ISortItem } from 'components/sort'

const sortConfig: ISortItem[] = [{
    key: 'createTime',
    label: '创建时间',
    ascText: '创建时间从早到晚',
    descText: '创建时间从晚到早'
}, {
    key: 'timeLen',
    label: '视频时长',
    ascText: '时长从小到大',
    descText: '时长从大到小'
}]
export default () => {
    const router = useRouter();
    const [form] = Form.useForm();
    const columns = [
        {
            title: '文件名',
            dataIndex: 'fileName',
        },
        {
            title: '基本信息',
            width: 300,
            render: (row: any) => (
                <div className="base-info">
                    <label>创建时间</label>
                    <div>1</div>
                    <label>音频时长</label>
                    <div>1</div>
                </div>
            ),
        },
        {
            title: '图片信息',
            width: 400,
            render: (row: any) => (
                <div className="img-info">
                    <label>已捕获图片</label>
                    <div>1</div>
                    <label>已OCR图片</label>
                    <div>1</div>
                    <label>去重后图片</label>
                </div>
            ),
        },
        {
            title: '操作',
            width: 300,
            render: (row: any) => {
                return (
                    <div>
                        <Button type="link" onClick={() => viewDetail(row)}>查看</Button>
                        <Button type="link" disabled>
                            导出文本
                        </Button>
                        <Button type="link" disabled>
                            导出图片
                        </Button>
                    </div>
                );
            },
        },
    ];
    const viewDetail = (row: any) => {
        router.push('/recordDetail?id=' + 1)
    }
    const getTableData = ({ current, pageSize }: PaginatedParams[0], formData: any): Promise<any> => {
        const query = {
            ...formData,
            current,
            pageSize,
            prop: selectedSort.key,
            order: selectedSort.sort,
        };
        console.log(query)
        return Promise.resolve({ list: [{}] });
    };
    const { tableProps, search } = useAntdTable(getTableData, {
        defaultPageSize: 10,
        form,
    });
    const { submit, reset } = search;
    const changeSort = (item: ISelectedSort) => {
        setSelectedSort(item)
        submit()
    }
    const [selectedSort, setSelectedSort] = useState<ISelectedSort>({ key: 'createTime', sort: 'asc' })
    const sortProps = useMemo(() => ({
        selectedSort,
        changeSort,
        sortConfig
    }), [selectedSort])
    const searchForm = (
        <Card className="mb20">
            <Form form={form} layout="inline">
                <Form.Item name="timeRange">
                    <DatePicker.RangePicker />
                </Form.Item>
                <Form.Item name="userRemark">
                    <Input.Search placeholder="请输入文件名" enterButton="搜索" allowClear />
                </Form.Item>
                <Form.Item>
                    <Button type="primary">批量导出文本</Button>
                </Form.Item>
            </Form>
        </Card>
    );
    const [selectedRowKeys, setSelectedRowKeys] = useState([])
    const rowSelection = {
        selectedRowKeys,
        onChange (selectedRowKeys: any) {
            console.log('selectedRowKeys changed: ', selectedRowKeys);
            setSelectedRowKeys(selectedRowKeys)
        },
    };
    return (
        <Space className="records" direction="vertical" size={20}>
            <h2>数据下载</h2>
            {searchForm}
            <Sort {...sortProps}  />
            <Table rowSelection={{ ...rowSelection }} columns={columns} rowKey="id" {...tableProps} />
        </Space>
    );
};
